﻿<!DOCTYPE html>
<html>
<head>
    <title>高效率点图层</title>
    <script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
    var map;
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: {lon: 0, lat: 0},
        maxZoom: 18,
        zoom: 1
    });
    var url = host + "/iserver/services/map-world/rest/maps/World";
    L.supermap.tiledMapLayer(url).addTo(map);
    var colorCount = 10;
    var colors = getRandomColors(colorCount);
    addGraphicLayer();

    function addGraphicLayer() {
        var count = 100000;
        var graphics = [];
        var e = 45;
        var randomCircleStyles = [];
        for (var i = 0; i < colorCount; i++) {
            randomCircleStyles.push(L.supermap.circleStyle({
                color: colors[i],
                opacity: 1,
                radius: Math.floor(Math.random() * 15 + 1),
                fill: true,
                fillColor: colors[i],
                fillOpacity: 1
            }));
        }

        for (var i = 0; i < count; ++i) {
            var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
            graphics[i] = L.supermap.graphic({
                _latlng: L.latLng(coordinates[0], coordinates[1]),
                _canvas: randomCircleStyles[Math.floor(Math.random() * colorCount)].getCanvas()
            });
        }
        L.supermap.graphicLayer(graphics, {
            handleClick: function (graphic) {
                L.popup().setLatLng(graphic.getLatLng())
                    .setContent('<p>经纬度是：<br>' + graphic.getLatLng().lng + ',<br>' + graphic.getLatLng().lat + '</p>')
                    .openOn(map);
            }
        }).addTo(map);
    }

    function getRandomColors(count) {
        return randomColor({
            luminosity: 'bright',
            hue: 'random',
            alpha: 0.5,
            format: 'rgba',
            count: count
        });
    }
</script>
</body>
</html>